import { Button, Card, Row, Col } from "antd";
import { useNavigate } from "react-router-dom";
import { HomeOutlined } from "@ant-design/icons";

const NotFound = () => {
  const navigate = useNavigate();

  return (
    <div style={{ padding: "24px" }}>
      <Row justify="center" align="middle" style={{ minHeight: "80vh" }}>
        <Col xs={24} sm={20} md={16} lg={12} xl={10}>
          <Card
            hoverable
            style={{
              borderRadius: "8px",
              boxShadow:
                "0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05)",
            }}
          >
            <div style={{ textAlign: "center", padding: "40px 20px" }}>
              <img
                src="/404.jpg"
                alt="404"
                style={{
                  width: "100%",
                  maxWidth: "500px",
                  height: "auto",
                  marginBottom: "32px",
                }}
              />
              <h1
                style={{
                  fontSize: "24px",
                  color: "#1f1f1f",
                  marginBottom: "16px",
                  fontWeight: 500,
                }}
              >
                哎呀，页面好像去火星了...
              </h1>
              <p
                style={{
                  color: "rgba(0,0,0,0.45)",
                  marginBottom: "32px",
                  fontSize: "16px",
                }}
              >
                请检查您输入的网址是否正确，或点击下方按钮返回首页
              </p>
              <Button
                type="primary"
                icon={<HomeOutlined />}
                size="large"
                onClick={() => navigate("/")}
                style={{
                  backgroundColor: "#52c41a",
                  borderColor: "#52c41a",
                  padding: "0 32px",
                  height: "40px",
                  borderRadius: "20px",
                }}
              >
                返回首页
              </Button>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default NotFound;
